<script setup lang="ts">
import avatarURL from '@/assets/img/user.jpg'
import { TOKEN, USER_INFO, USER_MENUS } from '@/utils/token'
import { localCache } from '@/utils/cache'
import { useFullscreen } from '@vueuse/core'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { notification } from '@/utils/notification'

// 1.点击切换全屏
const { isFullscreen, toggle } = useFullscreen()

// 2.点击刷新页面
const handleRefresh = () => location.reload()

// 3.设置头像地址
const url = ref(avatarURL)

// 4.退出账号逻辑
const router = useRouter()
// 4.1提示框
const dialogVisible = ref(false)
// 4.2点击显示提示框
const handleLogoutClick = () => {
  dialogVisible.value = true
}
// 4.3提示框确认按钮执行退出登录
const handleConfirmLogout = () => {
  localCache.removeCache(TOKEN)
  localCache.removeCache(USER_INFO)
  localCache.removeCache(USER_MENUS)

  router.push('/login')

  notification('success', '已成功退出账号。')
}
</script>

<template>
  <div class="header-info">
    <div class="operation">
      <el-tooltip effect="dark" content="全屏" placement="bottom">
        <span @click="toggle">
          <el-icon>
            <component :is="isFullscreen ? 'Aim' : 'FullScreen'" />
          </el-icon>
        </span>
      </el-tooltip>
      <el-tooltip effect="dark" content="刷新" placement="bottom">
        <span @click="handleRefresh">
          <el-icon><RefreshRight /></el-icon>
        </span>
      </el-tooltip>
      <el-tooltip effect="dark" content="通知" placement="bottom">
        <span>
          <span class="dot"></span>
          <el-icon><Postcard /></el-icon>
        </span>
      </el-tooltip>
    </div>
    <div class="info">
      <el-dropdown>
        <span class="user-info">
          <el-avatar :size="30" class="avatar" :src="url" />
          <span class="name"> Sokach</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleLogoutClick">
              <el-icon><CircleCloseFilled /></el-icon>
              退出系统
            </el-dropdown-item>
            <el-dropdown-item divided>
              <el-icon><InfoFilled /></el-icon>
              个人信息
            </el-dropdown-item>
            <el-dropdown-item>
              <el-icon><Unlock /></el-icon>
              修改密码
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <el-dialog v-model="dialogVisible" title="退出账号" width="30%">
    <span>是否确认退出账号？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmLogout"> 确认退出 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.header-info {
  display: flex;
  align-items: center;
  .operation {
    display: inline-flex;
    margin-right: 20px;
    span {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 35px;

      &:hover {
        background: #f2f2f2;
      }

      i {
        font-size: 20px;
      }
      .dot {
        position: absolute;
        top: 3px;
        right: 3px;
        z-index: 10;
        width: 6px;
        height: 6px;
        background: red;
        border-radius: 100%;
      }
    }
  }
}
.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;

  .name {
    margin-left: 8px;
  }
}
.info {
  :global(.el-dropdown-menu__item) {
    line-height: 36px !important;
    padding: 6px 22px;
  }
}
</style>
